<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<div id="entry">
				<div id="user">
					<label>
						用户名:<input type="text" value="kky" placeholder="请输入姓名" />
					</label><br />
					<label>
						年龄:<input type="number" value=0 />
					</label>
				</div>
				<div id="sex">
					性别<br/>
					<label>
						男:<input type="radio" name="sex" value=0 checked />
					</label>	
					<label>
						女:<input type="radio" name="sex" value=1  />
					</label>
				</div>
				<div id="hobby">
					爱好:<br/>
					<label>
						学习 <input type="checkbox" value="h1" />
					</label>
					<label>
						健身 <input type="checkbox" value="h2" />
					</label>
					<label>
						游泳 <input type="checkbox" value="h3" />
					</label>
					<label>
						工作 <input type="checkbox" value="h4" />
					</label>
					<label>
						看电影 <input type="checkbox" value="h5" />
					</label>
					<div>
						<label>
							全选/全不选
							<input type="checkbox" id="checkAll"  />
							<!-- <input type="checkbox" id="checkAll" onclick="fn111(this)"  /> -->
						</label>
						<button type="button" id="notCheck">反选</button>
					</div>
				</div>
				<div id="education">
					学历:<br />
					<select>
						<option value="e1">小学</option>
						<option value="e2">中学</option>
						<option value="e3">高中</option>
						<option value="e4">大学</option>
					</select>
				</div>
				<br />
				<div>
					<button type="button" onclick="add()">添加</button>
				</div>
			</div>
			<br />
			<br />
			<div id="show">
				<table id="tab">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>学历</th>
							<th>爱好</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<!-- <tr>
							<td>1</td>
							<td>kky</td>
							<td>18</td>
							<td>小哥哥</td>
							<td>大学</td>
							<td>学习,健身,游泳,工作,看电影</td>
							<td>
								<a onclick=upd({id:1})>编辑</a>
								<a onclick=del(i)>删除</a>
							</td>
						</tr> -->
					</tbody>
				</table>
			</div>
			
			<script >
				var arr=[];//用户存储数据
				
				//添加数据
				function add(){
					var userIpts= document.querySelectorAll("");
					//console.log("userIpts:",userIpts);
					var user=userIpts[0].value;
					var age=userIpts[1].value;
					var educationSleect=document.querySelector("#education>select")
					if(user&&age){
						var sex=getUserSex();
						console.log("sex:",sex);
						var hobby=getUserHobyy();
						var education=educationSleect.value;
						
						// console.log("user",user);;
						// console.log("age",age);
						// console.log("sex",sex);
						// console.log("hobby",hobby);
						var obj={
							id:+new Date(),
							user:user,
							age:age,
							sex:sex,
							hobby:hobby,
							education:education
						}
						
						arr.push(obj);
						console.log("最新数据:",arr);
						showPage(arr);
						
					}else{
						alert("用户名和年龄不能为空");
					}
				}
				
				//获取用户输入的姓名和年龄
				function getUserSex(){
					var sexIpts=document.querySelectorAll("div#sex>label input");
					//console.log("sexIpts:",sexIpts);
					var sex;
					if(sexIpts[0].checked){
						sex=sexIpts[0].value;
					}else{
						sex=sexIpts[1].value;
					}
					return sex;
				}
				//获取用户的选取的爱好
				function getUserHobyy(){
					var hobbyIpts=document.querySelectorAll("div#hobby>label input");
					//console.log("hobbyIpts",hobbyIpts);
					var hobby=[];
					for(var i=0;i<hobbyIpts.length;i++){
						if(hobbyIpts[i].checked){
							hobby.push(hobbyIpts[i].value);
						}
					}
					return hobby;
				}
				
				// 全选/全不选
				var checkAll=document.getElementById("checkAll");
				checkAll.onclick=function(){
					//console.log("this:",this);
					//console.dir(this);
					var f=this.checked;
					//console.log("f:",f);
					
					var ipts=document.querySelectorAll("div#hobby>label>input");
					//console.log("ipts:",ipts);//
					
					for(var i=0;i<ipts.length;i++){
						ipts[i].checked=f;//代表当前这个复选框被选中
					}
				}
				
				//反选
				var notCheck=document.getElementById("notCheck");
				notCheck.onclick=function(){
					var ipts=document.querySelectorAll("div#hobby>label>input");
					//console.log("ipts:",ipts);//
					for(var i=0;i<ipts.length;i++){
						ipts[i].checked= !ipts[i].checked;//当前这个复选框取反
					}
					fn1();
				}
			
				//是否需要选中 全选
				var ipts=document.querySelectorAll("div#hobby>label>input");
					for(var i=0;i<ipts.length;i++){
						ipts[i].onclick=function(){
							fn1();
						}
					}
					
				//
				function fn1(){
					var f=true;
					for(var a=0;a<ipts.length;a++){
						if(!ipts[a].checked){
							f=false;
							break;
						}
					}
					checkAll.checked=f;
				}
				
				
				//渲染页面(table)
				function showPage(arr){
					var tbody=document.getElementById("tbody");
					tbody.innerHTML="";
					var trs="";
					for(var i=0;i<arr.length;i++){
						trs+=`
							<tr>
								<td>${i}</td>
								<td>${arr[i].user}</td>
								<td>${arr[i].age}</td>
								<td>${arr[i].sex=="0"?"小哥哥":"小姐姐"}</td>
								<td>${setEducation(arr[i].education)}</td>
								<td>${setHobby(arr[i].hobby)}</td>
								<td>
									<a onclick=upd(${JSON.stringify(arr[i])})>编辑</a>
									<a onclick=del(${arr[i].id})>删除</a>
								</td>
							</tr>
						`;
					}
					tbody.innerHTML=trs;
				}
				
				//编辑
				function upd(obj){
					console.log("你要修改的数据:",obj);
				}
				
				//删除
				function del(id){
					console.log("你要删除的id:",id);
				}
				//返回学历
				
				function setEducation(attr){
					var obj={
						e1:"小学",
						e2:"中学",
						e3:"高中",
						e4:"大学",
					}
					console.log("attr:",attr,"obj["+attr+"]:",obj[attr]);
					return obj[attr];
				}
				//返回爱好
				function setHobby(arr){
					console.log("arr:",arr);
					var obj={
						h1:"学习",
						h2:"健身",
						h3:"游泳",
						h4:"工作",
						h5:"看电影",
					}
					var str="";
					for(var i=0;i<arr.length;i++){
						if(i==arr.length-1){
							str+=obj[arr[i]];
						}else{
							str+=obj[arr[i]]+","
						}
					}
					console.log("str:",str)
					return str;
				}
			</script>
	</body>
</html>
